<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>test</title>
	<script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="css/animate.css" />
</head>
<body>
	  <div id="app">
	  
	   <h1>vue-router 路由元信息与url路径?参数（每个路由自定义的数据）</h1>
	        {{ message }}
	         <router-link to="/hello?qq=421419567">hello</router-link>
	         <router-link to="/word?qq=2596565940">word</router-link>
	         <router-view></router-view>
	  </div>
</body>
</html>
<script>
   var luyou =  new VueRouter({
    	routes : [ 
    	     {
    	        path : "/hello",
    	        component :{
    	        	template : "<p>Hello liubf!</p>",
    	        	 beforeRouteEnter (to, from, next) {    //当进入该路由的时候
    	        	    alert( "离开时的链接：" +  from.path + "。原路由元信息：" + from.meta.requiresAuth +  " 将进入的链接：" + to.path + "。新路由元信息：" + to.meta.requiresAuth );  // to和form都是一个router对象  输出进入的路由的路径 和离开的路由路径
	    	    	    alert( "离开链接的get参数：" + from.query.qq  +  "当前链接的get参数：" + to.query.qq);
    	        	    next();  //调用钩子函数后 必须next(); 表示钩子运行已结束
	    	    	  }
    	         },
    	         meta: { requiresAuth: "Hello数据" }  //可以存储路由一些自定义数据 
    	     },
    	     {
    	    	 path : "/word",
    	    	 component : {
    	    		 template : "<p>Word qiuqiu!</[]>",
    	    		 beforeRouteEnter (to, from, next) {    //当进入该路由的时候
		    	    	    alert( "离开时的链接：" +  from.path + "。原路由元信息：" + from.meta.requiresAuth +  " 将进入的链接：" + to.path + "。新路由元信息：" + to.meta.requiresAuth );  // to和form都是一个router对象  输出进入的路由的路径 和离开的路由路径
		    	    	    alert( "离开链接的get参数：" + from.query.qq  +  "当前链接的get参数：" + to.query.qq);
		    	    	    next();  //调用钩子函数后 必须next(); 表示钩子运行已结束
		    	    	  }
    	    	 },
    	    	 meta: { requiresAuth: "Word数据" } //可以存储路由一些自定义数据
    	    	 
    	     }
    	 ]
    	
    })
    

     new Vue({
    	 el: "#app",
    	 router : luyou,
    	 data : {
    		 message : "Hello Word!"
    	 }
     });
</script>